<template>
  <div class="comment">
    <el-alert v-if="hasError" :title="error" type="error">
    </el-alert>
    <el-form class="comment-form" ref="comment-form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="昵称" prop="name">
        <el-input v-model="form.name" maxlength="16"></el-input>
      </el-form-item>
      <el-form-item label="你的留言" prop="comment">
        <el-input type="textarea" maxlength="256" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.comment"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="disabled" type="primary" @click="handleSubmit">立即推送</el-button>
        <el-button @click="resetForm('comment-form')">重置</el-button>
      </el-form-item>
    </el-form>
    <ul class="comment-list">
      <li class="comment-list-item" v-for="(item, key) in commentList" :key="key">
        <CommentItem :name="item.name" :comment="item.comment" />
      </li>
    </ul>
  </div>
</template>

<script>
import CommentItem from "./CommentItem.vue";
import device from "current-device";
import api from "@/api.js";

export default {
  components: {
    CommentItem
  },
  data() {
    return {
      hasError: false,
      error: "",
      sending: false,
      disabled: false,
      rules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 16, message: "长度在 2 到 16 个字符", trigger: "blur" }
        ],
        comment: [{ required: true, message: "请填写留言", trigger: "blur" }]
      },
      form: {
        name: "",
        comment: ""
      },
      commentList: []
    };
  },
  computed: {
    mobile() {
      return device.mobile();
    }
  },
  watch: {
    "form.comment": function () {
      this.disabled = false;
    }
  },
  created() {
    this.getCommentList();
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    disabledSubmit(time) {
      this.disabled = true;
      setTimeout(() => {
        this.disabled = false;
      }, time);
    },
    async getCommentList() {
      try {
        const { data } = await api.getComment();
        this.commentList = data.reverse();
      } catch (error) {
        this.alertError("服务器未响应");
      }
    },
    validateForm(formName) {
      let result = false;
      this.$refs[formName].validate(valid => {
        if (valid) {
          result = true;
        }
      });
      window.console.log(result);
      return result;
    },
    async handleSubmit() {
      //this.disabledSubmit(1000 * 60);
      if (!this.validateForm("comment-form")) {
        return;
      }
      this.disabled = true;

      try {
        const { data } = await api.pushComment({ data: this.form });
        this.commentList.unshift(data);
        this.resetForm("comment-form");
        this.disabled = false;
      } catch (error) {
        this.alertError("服务器未响应");
        this.disabled = false;
      }
    },
    alertError(msg) {
      this.hasError = true;
      this.error = msg;
      window.setTimeout(() => {
        this.hasError = false;
        this.error = "";
      }, 1000 * 10);
    }
  }
};
</script>

<style lang="scss" scoped>
.comment {
  overflow: hidden;
  width: 100%;
  padding: 25px 0 50px;
}
.comment-list {
  max-width: 1080px;
  margin: 0 auto;
}
@media (orientation: portrait) {
  .comment-list {
    padding: 0;
  }
}
.comment-list-item {
  list-style: none;
}
.comment-form {
  width: 100%;
  max-width: 960px;
  box-sizing: border-box;
  padding: 0 16px 0 8px;
  margin: 25px auto;
}
</style>
